<template>
  <footer class="footer" >
    <span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
    <ul class="filters">
      <li>
        <a @click="filter('all')" :class="{selected: type === 'all' }" href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="filter('no')" :class="{selected: type === 'no' }" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="filter('yes')" :class="{selected: type === 'yes' }"  href="javascript:;" >已完成</a>
      </li>
    </ul>
    <!-- v-for="(item,index) in list" :key="index" -->
    <button class="clear-completed" v-show="isClear" @click="clearAll">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: {
    list: {
         type: Array,
         required:true,
       },
       type:String
  },
computed: {
  leftCount() {
    // 用filter筛选list里面isDone为false的长度，长度值就等于剩余值
    return this.list.filter(item => item.isDone === false).length
  },
 isClear() {
   //长度的true和v-show里的true对应绑定，为true时‘清除已完成’显示，反之不显示
   return this.list.filter(item => item.isDone === true).length > 0
 }
},
methods: {
  // 清除所有
  clearAll() {
    this.$emit('clearAll');
  },
  filter(type){
     this.$emit('changeType',type);
  }
},
}
</script>